<template>
	<view class="material-office padding" :style="'width:' + width + ';height:' + height + ';'">
		<view class="material-office__inner padding f-28 flex-middle-center">自动打开文档中，如果长时间没有反应，请点击下方的打开文档按钮...</view>
	</view>
</template>

<script>
	export default {
		name: "material-office",
		props: {
			store: {
				type: Object,
				default: () => {}
			},
			width: { // 宽度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: "100%"
			},
			height: { // 高度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: "225px"
			},
		},
		watch: {
			store: function() {
				this.load();
			}
		},
		mounted() {
			this.load();
		},
		methods: {
			load: function() {
				this.$emit('material:office', true)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.material-office__inner {
		border: 2px dotted #eee;
		text-align: center;
		height: 300rpx;
	}
</style>
